<template>
    <div class="order">
        <Breadcrumb></Breadcrumb>
        <div class="list">


            <!-- 2. 列表展示 -->
            <div class='header'>
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                            <el-form-item label="订单编号" label-width="100px">
                                <el-input v-model="formInline.user" placeholder="输入品牌名称"></el-input>
                            </el-form-item>
                            <el-form-item label="预定时间" label-width="100px">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col class="line" :span="2">至</el-col>
                                <el-col :span="11">
                                    <el-time-picker placeholder="选择时间" v-model="formInline.date2"
                                        style="width: 100%;"></el-time-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="下单人" label-width="100px">
                                <el-input v-model="formInline.user" placeholder="输入"></el-input>
                            </el-form-item>
                            <el-form-item label="所属单位" label-width="100px">
                                <el-input v-model="formInline.user" placeholder="输入"></el-input>
                            </el-form-item>
                            <el-form-item label="汇总状态" label-width="100px">
                                <el-select v-model="formInline.region" placeholder="全部">
                                    <el-option label="全部" value="shanghai"></el-option>
                                    <el-option label="未汇总" value="shanghai"></el-option>
                                    <el-option label="已汇总" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>

                        </el-form>
                    </el-col>
                    <el-col :span="10">
                        <el-button type="primary">查询</el-button>
                    </el-col>
                </el-row>


            </div>

            <!-- 3. 订单列表按钮 -->
            <div class="header-btn">
                <el-button class="order-btn" type="warning" size="small" @click="download">导出</el-button>
            </div>

            <!-- 4. 表格展示数据 -->
            <div class="list-content">
                <el-table id="table"  :data="tableData" border style="width: 100%"
                    :header-cell-style="{ background: '#fafafa', color: '#333', textAlgin: 'center' }"
                    @selection-change="selectChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="orderNum" label="汇总单编号">
                        <template #default="scope">
                            <span @click="OrderDecs(scope.row)" style="color:blue;cursor: pointer;">{{
                                    scope.row.orderNum
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operator" label="汇总人"></el-table-column>
                    <el-table-column prop="phone" label="联系电话"></el-table-column>
                    <el-table-column prop="time" label="汇总时间">
                        <template #default="scope">
                            <span>{{ dayjs(scope.row.time).format('YYYY-MM-DD') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalPrice" label="汇总单总价格"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="danger" size="mini" @click="closeCollect(scope.row)">撤销汇总</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 5. 分页 -->
            <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"></Pagination>

        </div>
    </div>
</template>
  
<script setup>
import Pagination from '@/components/Pagination'
import { getCollect, getCancel } from '@/api/order'
import dayjs from 'dayjs'
import { reactive, ref } from 'vue'
//导出excel
import * as XLXS from "xlsx";
import FileSaver from "file-saver";
const selectIds = ref([])
const tableData = ref([])
const total = ref(10)
const pageSize = ref(1)
const formInline = reactive({
    user: '',
    region: ''
})
const name = ref('生鲜采购订单汇总')

dayjs
//撤销汇总-----------------------------
const closeCollect = (row) => {
    // // this.$confirm('是否撤销该汇总订单, 是否继续?', '撤销汇总提示', {
    // //   confirmButtonText: '确定',
    // //   cancelButtonText: '取消',
    // //   type: 'warning'
    // // }).then(() => {
    getCancel({
        id: row.id
    }).then(res => {
        console.log('撤销汇总-----', res.data);
        if (res.data.status == 200) {
            //更新视图
            getCollectList()
        }
    })

    // }).catch(() => {
    //   this.$message({
    //     type: 'info',
    //     message: '已取消删除'
    //   });
    // });

}
//点击进入订单详情----------------
const OrderDecs = (row) => {
    console.log('点击进入订单详情---');
}
//选择table-----------------------
const selectChange = (selection) => {
    let arr = []
    selection.forEach(ele => {
        arr.push(ele.id)
    });
    selectIds.value = arr;
    console.log('选择table----ids', selectIds.value);
}

//点击分页---------------------------------------------
const getPagination = (page) => {
    console.log(page);
    getorderList(page);
}
//获取汇总清单列表数据接口---------------------------------
const getCollectList = async (page) => {
    let res = await getCollect({ page })
    console.log('汇总清单列表数据-----', res.data);
    if (res.data.status === 200) {
        tableData.value = res.data.data;
        //页码
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
    } else {
        console.log('请求失败');
        tableData.value = []
        pageSize.value = 0;
        total.value = 1;
    }
}
//导出表格=---------------
const download = () => {
    // 导出文件名
    // const filename = state.excelTitle
    // 通过id，获取导出的表格数据
    const wb = XLXS.utils.table_to_book(document.getElementById("table"), {
        raw: true,
    });
    const wbout = XLXS.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(new Blob([wbout], {
                // 定义文件格式流
                type: "application/octet-stream",
            }),
            name.value + ".xlsx"
        );
    } catch (e) {
        console.log(e);
    }
    return wbout;
}
getCollectList()

</script>
  
<style lang="less" scoped>
.order {
    margin: 10px;
}

.list {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
}

.header {
    margin-top: 20px;

    .el-form--inline .el-form-item {
        margin-right: 20px;
    }
}

.header-btn {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 10px;

    .el-button {
        background: orange;
        border: none;
        width: 100px;
        font-weight: bold;
    }
}

.list-content {
    margin-top: 30px;
}
</style>